<template>
	<view class="main">
		<!-- 吸顶样式 -->
		<view class="sticky" v-if="false">
			<image src="../../static/user/j-avatar-3@2x.png" mode=""></image>
			<view class="stickyName">
				134****5727
			</view>
		</view>
		<view class="head">
			<view class="headUser">
				<view class="headUser-l">
					<view class="headUser-lHead">
						<image class="headUser-lImg" src="../../static/user/j-avatar-3@2x.png" mode=""></image>
						<view class="headUser-lText">
							更新
						</view>
					</view>
					<view class="headUser-login" v-if="false">
						登录/注册 <image src="../../static/user/j-white-arrow-r@2x.png" mode=""></image>
					</view>
					<view class="headUser-name">
						<view class="headUser-nameT">
							134****5727
						</view>
						<view class="headUser-nameB">
							<image class="headUser-nameB-vip" src="../../static/user/j-vip@2x.png" mode=""></image>
							VIP<text>0</text>/666成长值<image class="headUser-nameB-right"
								src="../../static/user/j-white-trgl-r@2x.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="headUser-r">
					<image src="../../static/user/j-setting@2x.png" mode=""></image>
				</view>
			</view>
			<view class="headSvip">
				<view class="headSvip-title">
					<view class="headSvip-titleL">
						<image src="../../static/user/j-svip-me-tips@2x.png" mode=""></image>
					</view>
					<view class="headSvip-titleC">
						开通超级VIP,限时特惠仅需<text>15</text>元
					</view>
					<view class="headSvip-titleR">
						去开通
						<view class="headSvip-titleR-icon">
							限时
						</view>
					</view>
				</view>
				<view class="headSvip-icon">
					<view class="headSvip-iconItem" v-for="(item,i) in 5">
						<image src="../../static/images/icon_user.png"></image>
						<view class="">
							专享红包
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<image class="contentTop" src="../../static/user/j-me-arc-bg@2x.png" mode="widthFix"></image>
			<view class="contentMoney">
				<view class="contentMoney-item">
					<view class="contentMoney-itemNum">
						-
					</view>
					<view class="contentMoney-itemName">
						优惠券
					</view>
					<view class="contentMoney-itemHit">
						我的券包
					</view>
				</view>
				<view class="contentMoney-item">
					<view class="contentMoney-itemNum">
						0
					</view>
					<view class="contentMoney-itemName">
						礼品卡
					</view>
					<view class="contentMoney-itemHit">
						可赠好友
					</view>
					<view class="contentMoney-itemIcon">
						敬请期待
					</view>
				</view>
				<view class="contentMoney-item">
					<view class="contentMoney-itemNum">
						-
					</view>
					<view class="contentMoney-itemName">
						积分
					</view>
					<view class="contentMoney-itemHit">
						积分兑好礼
					</view>
				</view>
			</view>
			<view class="contentTab">
				<view class="contentTab-item">
					<image src="../../static/user/j-me-prominent-invite-1.gif" mode="heightFix"></image>
					<view class="">
						邀请有奖
					</view>
				</view>
				<view class="contentTab-item">
					<image src="../../static/user/j-me-prominent-invite-task.gif" mode="heightFix"></image>
					<view class="">
						0元领奖
					</view>
				</view>
				<view class="contentTab-item">
					<image src="../../static/user/j-me-prominent-invite-1.gif" mode="heightFix"></image>
					<view class="">
						领券中心
					</view>
				</view>
				<view class="contentTab-item">
					<image src="../../static/user/j-me-prominent-wechat@2x.png" mode="heightFix"></image>
					<view class="">
						企微福利官
					</view>
				</view>
			</view>
			<view class="contentFunction">
				<view class="contentFunction-title">
					常用功能
				</view>
				<view class="contentFunction-list">
					<view class="contentFunction-item">
						<image src="../../static/user/j-me-add@2x.png" mode="heightFix"></image>
						<view class="">
							收货地址
						</view>
					</view>
					<view class="contentFunction-item">
						<image src="../../static/user/j-me-invoice@2x.png" mode="heightFix"></image>
						<view class="">
							发票开具
						</view>
					</view>
					<view class="contentFunction-item">
						<image src="../../static/user/j-me-discount@2x.png" mode="heightFix"></image>
						<view class="">
							优惠兑换
						</view>
					</view>
					<view class="contentFunction-item">
						<image src="../../static/user/j-me-collect-2@2x.png" mode="heightFix"></image>
						<view class="">
							我的关注
						</view>
					</view>
				</view>
			</view>
			<view class="contentWrap">
				<u-swiper :list="list" height="180"></u-swiper>
			</view>
			<view class="contentService">
				<view class="contentService-title">
					我的服务
				</view>
				<view class="contentService-list">
					<view class="contentService-item" v-for="(item,i) in 8">
						<image src="../../static/user/j-me-card@2x.png" mode="heightFix"></image>
						<view class="">
							我的卡包
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			}
		},
		methods: {

		}
	}
</script>

<style>
	.head {
		background: url('../../static/user/j-new-default-bg@2x.jpg') no-repeat;
		background-size: 100%;
	}

	.headUser {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 38rpx;
		padding-top: 90rpx;
		padding-bottom: 20rpx;
	}

	.headUser-l {
		display: flex;
		align-items: center;
	}

	.headUser-lImg {
		width: 96rpx;
		height: 96rpx;
		margin-right: 30rpx;
		background: #fff;
		border-radius: 50%;
	}

	.headUser-login {
		font-size: 38rpx;
		font-weight: 600;
		color: #fff;
	}

	.headUser-login image {
		width: 18rpx;
		height: 18rpx;
		margin-left: 12rpx;
		position: relative;
		top: -4rpx;
	}

	.headUser-r image {
		width: 50rpx;
		height: 50rpx;
	}

	.headSvip {
		background: #F7E7C5;
		margin: 30rpx;
		margin-top: 0;
		border-radius: 30rpx 30rpx 0 0;
	}

	.headSvip-title {
		display: flex;
		align-items: center;
		position: relative;
	}

	.headSvip-titleL {
		width: 160rpx;
		height: 80rpx;
		background: url('../../static/user/j-me-shape@2x.png') no-repeat;
		background-size: 100%;
		padding: 20rpx;
	}

	.headSvip-titleL image {
		width: 100rpx;
		height: 30rpx;
	}

	.headSvip-titleC {
		font-size: 26rpx;
	}

	.headSvip-titleC text {
		color: #fd2e26;
	}

	.headSvip-titleR {
		background: black;
		color: #fff;
		border-radius: 10rpx;
		padding: 8rpx 20rpx;
		font-size: 26rpx;
		position: absolute;
		right: 30rpx;
		top: 0;
		bottom: 0;
		margin: auto;
		height: 50rpx;
	}

	.headSvip-titleR-icon {
		position: absolute;
		font-size: 20rpx;
		background: #fd2e26;
		border: 2rpx solid #fff;
		border-radius: 10rpx 10rpx 10rpx 0rpx;
		top: -20rpx;
		padding: 0 10rpx;
		right: -20rpx;
	}

	.headSvip-icon {
		display: flex;
		justify-content: space-around;
		text-align: center;
		padding: 50rpx 0;
	}

	.headSvip-iconItem image {
		width: 48rpx;
		height: 48rpx;
		background: linear-gradient(-35deg, #e4c885, #fef4db);
		border-radius: 50%;
		padding: 16rpx;
		margin-bottom: 4rpx;
	}

	.content {
		position: relative;
		padding: 30rpx;
		padding-top: 0;
	}

	.contentTop {
		position: absolute;
		width: 100%;
		top: -50rpx;
		left: 0;
	}

	.contentMoney {
		background: #fff;
		display: flex;
		justify-content: space-around;
		text-align: center;
		padding: 30rpx 0;
		padding-top: 50rpx;
		border-radius: 20rpx;
	}

	.contentMoney-item {
		position: relative;
	}

	.contentMoney-itemName {
		margin-top: 20rpx;
		font-size: 26rpx;
	}

	.contentMoney-itemHit {
		font-size: 22rpx;
		color: gray;
		margin-top: 20rpx;
	}

	.contentMoney-itemIcon {
		font-size: 20rpx;
		background: linear-gradient(90deg, #fd2e26, #f96560);
		border-radius: 10rpx 10rpx 10rpx 2rpx;
		color: #fff;
		top: -10rpx;
		width: 90rpx;
		position: absolute;
		right: -70rpx;
	}

	.contentTab {
		display: flex;
		background: #fff;
		border-radius: 20rpx;
		margin: 30rpx 0;
		justify-content: space-around;
		padding: 30rpx 0;
		text-align: center;
		font-size: 26rpx;
	}

	.contentTab-item image {
		height: 100rpx;
	}

	.contentFunction {
		font-size: 26rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
	}

	.contentFunction-list {
		display: flex;
		justify-content: space-around;
		text-align: center;
	}

	.contentFunction-title {
		font-weight: 600;
		font-size: 30rpx;
	}

	.contentFunction-item image {
		height: 46rpx;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
	}

	.contentWrap {
		margin: 30rpx 0;
	}

	.contentService {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
	}

	.contentService-title {
		font-weight: 600;
		font-size: 30rpx;
	}

	.contentService-list {
		display: flex;
		flex-wrap: wrap;
	}

	.contentService-item {
		width: 25%;
		text-align: center;
		margin-top: 40rpx;
	}

	.contentService-item image {
		height: 44rpx;
	}

	.headUser-nameT {
		font-size: 34rpx;
		font-weight: 600;
		color: #fff;
		margin-bottom: 10rpx;
	}

	.headUser-nameB {
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 22rpx;
	}

	.headUser-nameB text {
		margin-left: 6rpx;
		font-size: 24rpx;
		font-weight: 600;
	}

	.headUser-nameB-vip {
		width: 26rpx;
		height: 26rpx;
		margin-right: 6rpx;
	}

	.headUser-nameB-right {
		width: 14rpx;
		height: 14rpx;
		margin-left: 10rpx;
		position: relative;
		top: 2rpx;
	}

	.headUser-lHead {
		position: relative;
		overflow: hidden;
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
		padding: 6rpx;
		background: #fff;
		margin-right: 20rpx;
	}

	.headUser-lText {
		position: absolute;
		background: rgba(0, 0, 0, .4);
		color: #fff;
		bottom: 0;
		width: 100%;
		text-align: center;
		left: 0;
		font-size: 22rpx;
	}

	.sticky {
		position: fixed;
		display: flex;
		align-items: center;
		width: 100%;
		padding: 20rpx 50rpx;
		background: url('../../static/user/j-new-default-bg@2x.jpg') no-repeat;
		background-size: 100% auto;
		z-index: 1;
	}

	.sticky image {
		width: 60rpx;
		height: 60rpx;
		border: 2rpx solid #fff;
		padding: 2rpx;
		border-radius: 50%;
		background: red;
	}

	.stickyName {
		color: #fff;
		margin-left: 20rpx;
		font-size: 34rpx;
		font-weight: 600;
	}
	.contentMoney-itemNum{
		font-size: 36rpx;
	}
</style>
